<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery-1.8.0.min.js"></script>
<script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<title>增加房屋信息</title>
</head>
<style>
input.error {
	bgood: 1px solid #E6594E;
}
</style>
<script>
	function schange() {
		var i = $('#district_id').val();
		$.ajax({
			url : "/house/allStreetByd.do",
			type : "get",
			data : "district_id=" + i,
			dataType : "text",
			success : function(result) {
				$('#street_id').html(result);
			},
		})
	};
</script>

<body>
	<div class="container">
		<form id="addHouseForm">
			<div class="form-group">
				<label for="type_id">请选择房型</label> <select class="form-control"
					id="type_id" name="type_id">
					<option value="" >请选择房型</option>
					<OPTION value="1">一室一厅</OPTION>
					<OPTION value="2">两室一厅</OPTION>
					<OPTION value="3">三室一厅</OPTION>
					<OPTION value="4">三室两厅</OPTION>
					<OPTION value="7">两室两厅</OPTION>
					<OPTION value="5">四室两厅</OPTION>
					<OPTION value="6">四室三厅</OPTION>
				</select>
			</div>
			<div class="form-group">
				<label for="district_id">请选择区域</label> <select class="form-control"
					id="district_id" name="district_id" onchange="schange()">
					<option value="" >请选择区域</option>
					<OPTION value="1">中原区</OPTION>
					<OPTION value="6">惠济区</OPTION>
					<OPTION value="2">高新区</OPTION>
					<OPTION value="5">金水区</OPTION>
					<OPTION value="4">管城区</OPTION>
					<OPTION value="8">郑东新区</OPTION>
					<OPTION value="7">上街区</OPTION>
					<OPTION value="3">二七区</OPTION>
				</select>
			</div>
			<div class="form-group">
				<label for="street_id">请选择街道</label> <select class="form-control"
					id="street_id" name="street_id">
					<option value="" >请选择街道</option>
				</select>
			</div>

			<div class="form-group">
				<label for="title">标题：</label> <input type="text"
					class="form-control" id="title" name="title" placeholder="输入租房信息标题">
			</div>

			<div class="form-group">
				<label for="price">月租金：</label> <input type="text"
					class="form-control" id="price" name="price" placeholder="输入月租金">
			</div>
			<div class="form-group">
				<label for="floorage">面积：</label> <input type="text"
					class="form-control" id="floorage" name="floorage"
					placeholder="输入房屋面积">
			</div>
			<div class="form-group">
				<label for="contact">联系方式：</label> <input type="text"
					class="form-control" id="contact" name="contact"
					placeholder="输入联系方式">
			</div>

			<div class="form-group">
				<label for="description">详细信息</label>
				<textarea class="form-control" rows="3" id="description"
					name="description"></textarea>
			</div>

			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>
</body>
<script>
	var addHouses = function() {
		if (!check().form()) {
			return;
		}
		$.ajax({
			type : "get",
			dataType : "json",
			url : "/house/add.do",
			data : {
				"title" : $("#title").val(),
				"price" : $("#price").val(),
				"floorage" : $("#floorage").val(),
				"type_id" : $("#type_id").val(),
				"street_id" : $("#street_id").val(),
				"description" : $("#description").val(),
				"contact" : $("#contact").val()
			},
			success : function(msg) {
				//响应成功关闭该窗口(取消)
				$('#cancelBtn').click();
			}
		})
	};

	$('#saveBtn').on('click', function() {
		addHouses();
	});

	$('#cancelBtn').on('click', function() {
		var index = parent.layer.getFrameIndex(window.name);
		parent.getPageList();
		parent.layer.close(index);
	});
	
	//校验字段是否正确 
	function check() {
		
		/*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
		return $("#addHouseForm").validate({
			rules : {
				title : {
					required : true
				},
				price : {
					required : true
				},
				contact : {
					required : true
				},
				floorage : {
					required : true
				},
				type_id : {
					required : true
				},
				description : {
					required : true
				},
				street_id : {
					required : true
				}
			},
			messages : {
				title : {
					required : ""
				},
				price : {
					required : ""
				},
				contact : {
					required : ""
				},
				floorage : {
					required : ""
				},
				type_id : {
					required : ""
				},
				description : {
					required : ""
				},
				street_id : {
					required : ""
				}
			}
		});
	}
</script>
</html>